<div th:fragment="control_chart_radar">
<script type="text/javascript">
	// 示例数据
	var get_radar_option = function()
	{
		return {
			legend : {
				data : [ '2016年' ]
			},
			tooltip:{},
			color : [ "#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0" ],
			radar : {
				indicator : [ {
					name : '1月'
				}, {
					name : '2月'
				}, {
					name : '3月'
				}, {
					name : '4月'
				}, {
					name : '5月'
				}, {
					name : '6月'
				} ],
				center : [ '50%', '50%' ],
				radius : 80
			},
			series : [],
			sql : ""
		};
	}

	/** 雷达图元数据 */
	function metadata_radar(params)
	{
		var series = {
			type : 'radar',
			column : "SUMVALUE",
			data : [ {
				value : [ 100, 200, 300, 400, 500, 600 ],
				name : '2016年'
			} ]
		};
		var opt = get_radar_option();// 每个视图创建新的option，防止相互污染
		opt.series.push(series);
		params = $.extend({}, {
			RADARID : {},
			DATASET : {
				series : series
			},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	/** 雷达图 元数据视图 面板视图 */
	function metadata_view_radar(control)
	{
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
			var series = option.series, sql = option.sql;

			var setDataSetDetail = function(s)
			{
				var name = s.data[0].name, column = s.column;
				var detail_view = $($("#DATASET_DETAIL_RADAR").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("input[name=column]").val(column);
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.legend.data = [];
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					
					var v = option.series[i].data[0].value;
					
					$.extend(option.series[i], {
						column : c,
						data : [{
							name : n,
							value : v
						}]
					});
					option.legend.data.push(n);
				});
			}

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
				var p = $.extend({}, seriesData);
				option.series.push(p);
				$(view).append(setDataSetDetail(p));
				_this.linkViewOption(option);
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "radar", function(result)
				{
					try
					{
						if (result.state == "true")
						{
							option.radar.indicator = result.indicator;
							for ( var i in series)
							{
								option.series[i].data[0].value = result[option.series[i].column];
							}
							_this.linkViewOption(option);
						} else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.series.splice(index, 1);
				$(this).parents(".dataset_detail").remove();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		}

		this.RADARID = function()
		{
			var view = $($("#RADARID").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			$(view).find("input").val(option.radar.radius).keyup(function(){
				option.radar.radius = $(this).val();
				_this.linkViewOption(option);
			});
			
			$(this.settingPanel).append(view);
		};
		return $.extend(new metadata_view_chart_base(control), this);
	}

	/** 雷达图 表单视图 */
	function metadata_form_view_radar(control)
	{
		this.control = control;
		this.echart = echarts.init($(control).find(".echarts-div")[0]);
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>

<!-- 雷达图画布 -->
<script type="text/html" id="RADARID">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="4">画布</td>
		</tr>
		<tr>
			<td class="setting-control-label">半径(%)</td>
			<td><input name="radius" class="form-control"></td>
		</tr>
	</table>
</div>
</script>

<!-- 控制面板 图表 dataSet详细配置 -->
<script type="text/html" id="DATASET_DETAIL_RADAR">
<div class="dataset_detail">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-label">名称</td>
			<td><input name="title" class="form-control"></td>
			<td class="setting-control-label">字段</td>
			<td><input name="column" class="form-control"></td>
			<td>
				<a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
			</td>
		</tr>
	</table>
</script>
</div>